<template>
  <div id="open">
    <div v-if="styles.type==1">
      <el-carousel height="648px">
        <el-carousel-item v-for="(v,i) in styles.imgUrl" :key="i">
          <el-image v-if="v.img==''" style="width: 100%; height: 100%" :src="img" fit="cover"></el-image>
          <el-image v-else style="width: 100%; height: 100%" :src="v.img" fit="cover"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="tangkuang" v-else>
      <div
        class="tangkuang-bg"
        :style="{background:`${styles.colorBg}`,opacity:`${styles.percent/100}`}"
      ></div>
      <div class="tangkuang-center" style="width:300px">
        <el-carousel height="500px">
          <el-carousel-item v-for="(v,i) in styles.imgUrl" :key="i">
            <el-image v-if="v.img==''" style="width: 100%; height: 100%" :src="img" fit="cover"></el-image>
            <el-image v-else style="width: 100%; height: 100%" :src="v.img" fit="cover"></el-image>
          </el-carousel-item>
        </el-carousel>
        <p>
        <i class="el-icon-circle-close delete"></i>
      </p>
      </div>
      
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "open",
  data() {
    return {
      img: require("../../../assets/img/blank1.png"),
      bg: require("../../../assets/img/phone-bg.png"),
    };
  },
  computed: {
    ...mapState(["open"]),
    styles() {
      return this.open[0].styles;
    },
  },
  components: {},
};
</script>
<style lang="less" scoped>
@import url("../../../assets/css/base.less");
#open {
  width: 100%;
  height: 100%;
  background: url("../../../assets/img/blank-bg.png") no-repeat;
  background-size: 100%;
  .tangkuang {
    height: 100%;
    padding-top: 60px;
    position: relative;
    > .tangkuang-bg {
      width: 100%;
      height: 648px;
      margin-top: -60px;
    }
    > .tangkuang-center {
      width: 100%;
      position: absolute;
      left: 27.5px;
      top: 60px;
      border-radius: 10px;
      overflow: hidden;
      margin: 0 auto;
      > p {
      text-align: center;
      margin-top: 20px;
      .delete {
        font-size: 36px;
        color: #fff;
      }
    }
    }
    
  }
}
</style>
